import React, { useState } from 'react';
import { Button, message, Steps } from 'antd';
import AddPhoto from './components/AddPhoto';
import GenerateCode from './components/GenerateCode';
import GenerateFiles from './components/GenerateFiles';
import SelectStyle from './components/SelectStyle';
import StreamGenerate from './components/StreamGenerate';
import { useAnalysisStore } from '@/stores/analysisStore';
import styles from './index.module.less';

const UploadPage: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(0);
  
  // 使用 Zustand store
  const { analysisResult } = useAnalysisStore();

  const steps = [
    {
      title: '选择组件风格',
      description: '选择您喜欢的组件风格',
    },
    {
      title: '上传图片',
      description: '上传您的设计稿',
    },
    {
      title: '生成代码',
      description: '编辑生成的HTML',
    },
    {
      title: '流式生成HTML',
      description: '优化生成HTML代码',
    },
    {
      title: '生成文件',
      description: '生成文件',
    },
  ];

  const handleNext = () => {
    if (currentStep === 0) {
      setCurrentStep(1);
    } else if (currentStep === 1) {
      setCurrentStep(2);
    } else if (currentStep === 2) {
      setCurrentStep(3);
    } else if (currentStep === 3) {
      setCurrentStep(4);
    }
  };

  const handlePrev = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  return (
    <div className={styles.upload}>
      {/* <div className={styles.uploadHeader}>
        <h1>React DSL生成器</h1>
      </div> */}

      <div className={styles.stepsContainer}>
        <Steps
          current={currentStep}
          items={steps}
          style={{ marginBottom: 40 }}
        />
      </div>

      <div className={styles.uploadContent}>
        {currentStep === 0 && (
          <SelectStyle />
        )}
        {currentStep === 1 && (
          <AddPhoto />
        )}
        {currentStep === 2 && analysisResult && (
          <GenerateCode />
        )}
        {currentStep === 3 && (
          <StreamGenerate />
        )}
        {currentStep === 4 && (
          <GenerateFiles />
        )}
      </div>

      <div className={styles.uploadFooter}>
        <div className={styles.buttonGroup}>
          {currentStep > 0 && (
            <Button 
              size="large"
              onClick={handlePrev}
              style={{ 
                width: '100px',
                height: '40px',
                fontSize: '16px',
                marginRight: '16px'
              }}
            >
              上一步
            </Button>
          )}
          {currentStep !== 4 && (
            <Button 
              type="primary" 
              size="large"
              onClick={handleNext}
              disabled={
                (currentStep === 0 && !analysisResult?.theme) ||
                (currentStep === 1 && !analysisResult?.hasUploadedFile)
              }
              style={{ 
                width: '100px',
                height: '40px',
                fontSize: '16px'
              }}
            >
              下一步 
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default UploadPage;